<template>
  <div v-if="canAdd"><el-button class="newButton" @click="this.$refs.hissForm.show()">新增表单</el-button></div>
<!--  <div v-if="canAdd"><el-button class="newButton" @click="this.$refs.externalForm.show()">新增外部表单</el-button></div>-->
  <div v-if="!forms||forms.length==0" style="width: 100%;clear: both"><el-empty description="点击上面的按钮新增表单配置" /></div>
  <el-card v-else class="form-card" v-for="(form,index) in forms" style="margin-bottom: 15px;padding-bottom: 15px">
    <template #header>
      <div class="card-header">
        <span>{{ form.name }}</span>
        <el-button class="button" text icon="Close" @click="deleteForm(form.id)" v-if="form.nodeId==id">删除</el-button>
      </div>
    </template>
    <div class="line bold" >
      <div class="line-title">表单字段</div>
      <div class="line-body">
        <el-radio-group v-model="form['all']" @change="allChage(form.id)">
          <el-radio label="edit">编辑</el-radio>
          <el-radio label="view">查看</el-radio>
          <el-radio label="hide">隐藏</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div :class="{line : true,'hiss-bg':idx%2==0 }" v-for="(field,idx) in form.fields">
      <div class="line-title">{{field.fieldLabel}}</div>
      <div class="line-body">
        <el-radio-group v-model="field['type']">
          <el-radio label="edit">&nbsp;</el-radio>
          <el-radio label="view">&nbsp;</el-radio>
          <el-radio label="hide">&nbsp;</el-radio>
        </el-radio-group>
      </div>
    </div>
  </el-card>
  <add-hiss-form-dialog ref="hissForm" :tenant="tenant" :ok="addFormDialog"/>
</template>

<script>
import AddHissFormDialog from './AddHissFormDialog'

export default {
  name: "FormConfig",
  components:{AddHissFormDialog},
  props:{
    tenant:{
      type:String,
      default:''
    },
    config:{
      type: Object,
      default: {}
    },
    canAdd:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id:'',
      forms:[]
    }
  },
  methods: {
    // 保存
    saveForm(){
      if(!this.id||this.id==''){
        return
      }
      let nodeConfig = this.config.nodeConfig[this.id]||{};
      nodeConfig.formConfig=this.forms
      this.config.nodeConfig[this.id] = nodeConfig
    },
    // 初始化表单
    initForm(id){
      this.id = id
      let nodeConfig = this.config.nodeConfig[this.id]||{};
      let tempForms = nodeConfig.formConfig||[]
      if(tempForms.length>0){//删除多于的表单
        let newForms = []
        for (let i = 0; i < tempForms.length; i++) {
          let temp = tempForms[i]
          for (let j = 0; j < this.config.forms.length; j++) {
            let tempG = this.config.forms[j]
            if(tempG.id==temp.id){
              newForms.push(temp)
            }
          }
        }
        tempForms = newForms
      }
      // 填充表单
      for (let i = 0; i < this.config.forms.length; i++) {
        let temp = this.config.forms[i]
        let count=0
        for (let j = 0; j < tempForms.length; j++) {
          let tempF = tempForms[j]
          if(tempF.id==temp.id){
            count++
          }
        }
        if(count==0){// 添加新的表单,并设置默认权限
          let form = JSON.parse(JSON.stringify(temp));
          let auth = form.nodeId==this.id?'edit':'view';
          form['all']=auth
          let fields = form.fields;
          if(fields){
            for (let j = 0; j < fields.length; j++) {
              fields[j]['type']=auth
            }
          }
          tempForms.push(form)
        }
      }
      this.forms=tempForms
    },
    // 删除
    deleteForm( id){
      for (let i = 0; i < this.forms.length; i++) {
        let temp = this.forms[i]
        if(temp.id==id){
          this.forms.splice(i,1)
        }
      }
      for (let i = 0; i < this.config.forms.length; i++) {
        let temp = this.config.forms[i]
        if(temp.id==id){
          this.config.forms.splice(i,1)
        }
      }
    },
    // 添加
    addFormDialog(form){
      form['all']='edit'
      form['nodeId']=this.id
      this.forms.push(form)
      this.config.forms.push(JSON.parse(JSON.stringify(form)))
      this.allChage(form.id)
    },
    allChage(id){
      for (let i = 0; i < this.forms.length; i++) {
        let temp = this.forms[i]
        if(temp.id==id){
          for (let j = 0; j < temp.fields.length; j++) {
            let obj = temp.fields[j]
            obj.type=temp.all
          }
        }
      }
    }
  }
}
</script>

<style>
.bold {
  font-weight: bold;
  line-height: 32px;
  font-size: 14px;
  margin-bottom: 10px;
}
.line{
  font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  line-height: 32px;
}
.line-body .el-radio{
  width: 75px;
  --el-radio-font-size: 14px;
  float: right;
}
.form-card {
  text-align: left;
  display: block;
  clear: both;
}
.button {
  float: right;
  font-size: 12px;
}
.newButton {
  float: right;
  margin-bottom: 15px;
  display: block;
  margin-left: 15px;
  font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  font-size: 13px;
}
.hiss-bg {
  background-color: #efefef;
}
</style>
